<template>
  <div id="abnormalDetail">
    <van-sticky>
      <van-nav-bar title="异常上报" left-arrow @click-left="onClickLeft" />
    </van-sticky>
    <div class="detailInfo">
      <p>
        <span>医废袋编号</span>
        <span>YFD12356</span>
      </p>
      <p>
        <span>医废袋种类</span>
        <span>感染性废物</span>
      </p>
      <p>
        <span>医废袋重量</span>
        <span>30kg</span>
      </p>
    </div>
    <div class="detail">
      <p class="status" @click="showShare = !showShare">
        <span>医废袋状态</span>
        <span style="color:#007BF5;">院内暂存</span>
      </p>
      <p class="reason">
        <span>异常原因</span>
        <!-- <span>
          请选择
          <van-icon name="arrow" />
        </span>-->
      </p>
      <div class="explains">
        <div>
          <span class="bgc">遗失</span>
          <span>泄露</span>
          <span>扩散</span>
        </div>
        <div>
          <span>意外事故</span>
          <span>其他</span>
        </div>
      </div>
      <p class="explain">
        <van-field
          v-model="message"
          rows="1"
          autosize
          label="异常说明："
          type="textarea"
          placeholder="选填"
        />
      </p>
      <p class="status" @click="showShare = !showShare">
        <span>调用监控</span>
        <span style="color:#007BF5;">智能匹配监控时间</span>
      </p>
      <!-- <div class="upLoad">
        <p>上传凭证：</p>
        <van-uploader v-model="fileList" multiple />
      </div>-->
    </div>
    <div class="uploadBtn" @click="done">上传</div>
    <!-- <div class="over" @click="done">完成</div> -->
    <van-popup v-model="show">
      <div class="done-div">
        <p>
          <van-icon name="cross" @click="closeDone" />
        </p>
        <p>异常上报成功!</p>
        <p>我们将在24小时内给您反馈</p>
        <p>
          <!-- <van-button type="primary" size="mini" @click="closeDone">确认<an-button>
          <van-button type="primary" size="mini" @click="goMain">返回首页<an-button>-->
          <span @click="closeDone">确认</span>
          <span @click="goMain">返回首页</span>
        </p>
      </div>
    </van-popup>
  </div>
</template>
<script>
export default {
  data() {
    return {
      message: "",
      showShare: false,
      show: false,
      fileList: [
        { url: "https://img.yzcdn.cn/vant/leaf.jpg" },
        // Uploader 根据文件后缀来判断是否为图片文件
        // 如果图片 URL 中不包含类型信息，可以添加 isImage 标记来声明
        // { url: "https://cloud-image", isImage: true },
      ],
    };
  },
  methods: {
    onClickLeft() {
      this.$router.push({
        path: "/uploadAbnormal",
      });
    },
    onSelect(option) {
      // eslint-disable-next-line no-undef
      Toast(option.name);
      this.showShare = false;
    },
    onConfirm(value, index) {
      // eslint-disable-next-line no-undef
      Toast(`当前值：${value}, 当前索引：${index}`);
    },
    onChange(picker, value, index) {
      // eslint-disable-next-line no-undef
      Toast(`当前值：${value}, 当前索引：${index}`);
    },
    onCancel() {
      // eslint-disable-next-line no-undef
      Toast("取消");
    },
    done() {
      this.show = true;
    },
    closeDone() {
      this.show = false;
    },
    goMain() {
      this.$router.push({
        path: "/home",
      });
    },
  },
};
</script>
<style lang="less" scoped>
#abnormalDetail {
  box-sizing: border-box;
  background-color: #dcdfe6;
  width: 100vw;
  min-height: 100vh;
  .detailInfo {
    height: 120px;
    background: #ffffff;
    margin: 15px;
    margin-bottom: 10px;
    border-radius: 10px;
    display: flex;
    justify-content: space-around;
    flex-direction: column;
    padding: 0 15px;
    p {
      margin: 0;
      margin-bottom: 10px;
      span {
        margin-right: 20px;
      }
      :nth-child(1) {
        font-size: 17px;
        font-family: Source Han Sans CN, Source Han Sans CN-Regular;
        font-weight: 400;
        text-align: left;
        color: #707070;
      }
      :nth-child(2) {
        height: 17px;
        font-size: 17px;
        font-family: Source Han Sans CN, Source Han Sans CN-Regular;
        font-weight: 400;
        text-align: left;
        color: #333333;
      }
    }
  }
  .detail {
    height: 415px;
    background: #ffffff;
    margin: 10px 15px;
    border-radius: 10px;
    padding: 0 15px;
    margin-bottom: 0;
    .status,
    .reason {
      display: flex;
      justify-content: space-between;
      height: 50px;
      align-items: center;
      font-size: 17px;
      font-family: Source Han Sans CN, Source Han Sans CN-Regular;
      font-weight: 400;
      color: #707070;
      border-bottom: 1px solid #ccc;
      margin-bottom: 0;
    }
    .status {
      margin-top: 0;
    }
    .reason {
      border: none;
      margin: 0;
    }
    .explain {
      margin: 0;
      padding: 10px 0;
      border-top: 1px solid #efefef;
      border-bottom: 1px solid #efefef;
      .van-cell,
      .van-fiel {
        padding: 0 !important;
        font-size: 17px !important;
      }
    }
    .explains {
      div {
        display: flex;
        margin-bottom: 10px;
        .bgc {
          // background: #515151;
          background-image: linear-gradient(to bottom, #007bf4, #00a1f8);
          font-family: Source Han Sans CN, Source Han Sans CN-Regular;
          font-weight: 400;
          color: #ffffff;
          width: 90px;
        }
        span {
          width: 90px;
          height: 50px;
          border: 1px solid #707070;
          background: #fff;
          line-height: 50px;
          text-align: center;
          color: #707070;
          margin-right: 12px;
        }
      }
    }
    .upLoad {
      p {
        font-size: 17px;
        font-family: Source Han Sans CN, Source Han Sans CN-Regular;
        font-weight: 400;
        text-align: left;
        color: #707070;
      }
    }
  }
  .uploadBtn {
    box-sizing: border-box;
    height: 50px;
    background: #ffffff;
    border: 1px solid #707070;
    background-image: linear-gradient(to bottom, #007bf4, #00a1f8);

    text-align: center;
    line-height: 50px;
    position: absolute;
    bottom: 0;
    width: 100%;
  }
  .done-div {
    // padding: 15px 30px;
    width: 282px;
    height: 150px;
    text-align: center;
    p {
      &:nth-child(1) {
        text-align: right;
        margin: 5px 5px;
      }
      &:nth-child(2) {
        font-size: 24px;
        margin: 0;
      }
      &:nth-child(3) {
        font-size: 14px;
        font-family: Source Han Sans CN, Source Han Sans CN-Regular;
        font-weight: 400;
        text-align: center;
        color: #999999;
      }
      &:nth-child(4) {
        display: flex;
        justify-content: space-around;
      }
    }
  }
}
</style>